<template>
  <el-dialog
    v-model="dialogVisible"
    title="Tips"
    width="540"
    :close-on-press-escape="false"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <template #header>
      <div class="dialog-title">
        <h4>{{ props.title }}</h4>
      </div>
    </template>
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="emits('cancelClick')">{{ cancelText }}</el-button>
        <el-button type="primary" @click="emits('confirmClick')" v-if="showOk">
          {{ btnTextTwo }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
const props = withDefaults(
  defineProps<{
    dialogVisible: boolean
    title: string
    btnTextOne?: string
    btnTextTwo: string
    showOk: boolean
    cancelText: string
  }>(),
  {}
)
const emits = defineEmits<{
  (e: 'cancelClick'): void
  (e: 'confirmClick'): void
}>()
const dialogVisible = computed(() => props.dialogVisible)
</script>

<style lang="scss" scoped></style>
